<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .box1{width: 50px;height: 50px;background-color: #00c3a3;}
    </style>
</head>
<body>
<!--event.stopPropagation() 阻止事件的冒泡 兼容ie event.cancelBubble=true-->
<!--event.preventDefault() 阻止事件默认行为  兼容ie event.returnValue=false -->
<!--return false 既会阻止事件冒泡也会阻止默认事件-->
<div>
    <p>
        段落文本内容
        <input type="button" value="点击" />
    </p>
</div>
<script type="text/javascript">
    // 为所有div元素绑定click事件
    $("div").click( function(event){
        alert("div-click");
    } );
    //为所有p元素绑定click事件
    $("p").click( function(event){
        alert("p-click");
    } );
    //为所有button元素绑定click事件
    $(":button").click( function(event){
        alert("button-click");
        // 阻止事件冒泡到DOM树上
        event.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click
    } );
</script>
</body>
</html>